<template>
    <div class="home" v-loading="loading">
        <searchForm class="search-form" :searchFormConfig="searchFormConfig" @search="onClickSearch"  @clear="onClickClear" />
        <div class="center">
            <div class="card-box" v-for="(item, index) in cardInfoList" :key="index">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import searchForm from '@/components/searchForm.vue';
import { useHome } from '@/hooks/index';


const { initData,loading,cardInfoList, searchFormConfig } = useHome();

const onClickSearch = (searchForm) => {
    initData({
        currency: searchForm.currency,
        user_id: searchForm.busiId,
    });
}

const onClickClear = () => {
    initData({
        currency: 'VND',
    });
}
</script>
<style scoped lang="scss">
.home {
    .search-form {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .center {
        display: flex;
        justify-content: space-evenly;

        .card-box {
            width: 281px;
            height: 245px;
            border-radius: 7px;
            box-shadow: 0px 4px 10px 0px #0000004C;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 18px 35px;

            .label {
                color: #3D3D3D;
            }

            .value {
                color: #FFFFFF;
            }

            &:nth-child(1) {
                background: linear-gradient(180deg, #FFFFFF 0%, #127C70 99%);
            }

            &:nth-child(2) {
                background: linear-gradient(180deg, #FFFFFF 0%, #289C8F 99%);
            }

            &:nth-child(3) {
                background: linear-gradient(180deg, #FFFFFF 0%, #299D90 100%);
            }

            &:nth-child(4) {
                background: linear-gradient(180deg, #FFFFFF 0%, #34C6B3 100%);
            }

            &:nth-child(5) {
                background: linear-gradient(180deg, #FFFFFF 0%, #38C8B5 100%);
            }
        }

    }

    .bottom-card {
        margin-top: 26px;
        height: 386px;

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: 69px;
            padding-right: calc(var(--el-card-padding) * 3);

            .chart-title {
                color: #000000;
                font-weight: bold;
            }

            :deep(.chart-select) {
                width: 106px;
                height: 29px;

                .el-select__wrapper {
                    background-color: #2FC2AF;
                    color: #fff;

                    .el-select__selection {
                        .el-select__selected-item {
                            span {
                                color: #fff;
                            }
                        }
                    }

                    .el-select__caret {
                        color: #fff;
                    }
                }
            }
        }

        .charts-container {
            height: 265px;
        }
    }
}
</style>